<template>
  <!-- 客户已签署合同页面 -->
  <div class="CilentSign">
    <div class="head">
      <span class="blue"></span>
      <span class="pending">客户已签署</span>
    </div>
    <!-- 表单 -->
    <div class="content">
      <el-form :inline="true"
               :model="form"
               class="demo-form-inline">
        <el-form-item label="客户姓名"
                      class="name">
          <el-input v-model="form.name"
                    placeholder="请输入客户姓名"></el-input>
        </el-form-item>
        <el-form-item label="文件名称">
          <el-input v-model="form.fileName"
                    placeholder="请输入文件名称"></el-input>
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select v-model="form.region"
                     placeholder="待处理">
            <el-option label="待处理"
                       value="1"></el-option>
            <el-option label="已处理"
                       value="2"></el-option>
            <el-option label="已退回"
                       value="3"></el-option>
            <el-option label="客户已签署"
                       value="4"></el-option>
            <el-option label="银行已签署"
                       value="5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     class="size">查询</el-button>
          <el-button class="yellow">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- table数据 -->
      <el-table :data="tableData"
                class="table"
                style="width: 100%">
        <el-table-column prop="order"
                         label="订单号"
                         width="180">
        </el-table-column>
        <el-table-column prop="channel"
                         label="渠道"
                         width="180">
        </el-table-column>
        <el-table-column prop="name"
                         label="张三丰">
        </el-table-column>
        <el-table-column prop="IdNumber"
                         label="身份证号">
        </el-table-column>
        <el-table-column prop="phone"
                         label="手机号码">
        </el-table-column>
        <el-table-column prop="status"
                         label="订单状态">
        </el-table-column>
        <el-table-column prop="FileName"
                         label="文件名称">
        </el-table-column>
        <el-table-column prop="signed"
                         label="签署文件">
          <template>
            <el-button type="text">查看</el-button>
            <el-button type="text">下载</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="operation"
                         label="操作">
          <template>
            <el-button type="text"
                       @click="seal()">银行盖章</el-button> <br />
            <el-button type="text"
                       @click="examine()">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 银行电子盖章弹窗 -->
    <BankSeal ref="BankSeal" />
    <!-- 查看合同详情 -->
    <ContractParticulars ref="ContractParticulars" />
  </div>
</template>
<script>
// 导入银行电子盖章弹窗
import BankSeal from './BankSeal'
import ContractParticulars from './ContractParticulars'
export default {
  components: {
    BankSeal,
    ContractParticulars
  },
  data () {
    return {
      form: {
        name: '', // 客户姓名
        fileName: '', // 文件名称
        region: '' // 订单状态
      },
      tableData: [{
        order: '1',
        channel: '业务',
        name: '张三丰',
        IdNumber: '20200917',
        phone: '150123000211',
        status: '已处理',
        FileName: '租赁合同',
        signed: '查看 下载',
        operation: '审核'
      }, {
        order: '1',
        channel: '业务',
        name: '张三丰',
        IdNumber: '20200917',
        phone: '150123000211',
        status: '已处理',
        FileName: '租赁合同',
        signed: '查看 下载',
        operation: '审核'
      }, {
        order: '1',
        channel: '业务',
        name: '张三丰',
        IdNumber: '20200917',
        phone: '150123000211',
        status: '已处理',
        FileName: '租赁合同',
        signed: '查看 下载',
        operation: '审核'
      }, {
        order: '1',
        channel: '业务',
        name: '张三丰',
        IdNumber: '20200917',
        phone: '150123000211',
        status: '已处理',
        FileName: '租赁合同',
        signed: '查看 下载',
        operation: '审核'
      }, {
        order: '1',
        channel: '业务',
        name: '张三丰',
        IdNumber: '20200917',
        phone: '150123000211',
        status: '已处理',
        FileName: '租赁合同',
        signed: '查看 下载',
        operation: '审核'
      }]
    }
  },
  methods: {
    // 点击银行盖章弹出弹窗
    seal () {
      this.$refs.BankSeal.dialogVisible = true
    },
    // 点击查看详情弹窗
    examine () {
      this.$refs.ContractParticulars.dialogVisible = true
    }
  }

}
</script>
<style scoped lang="less">
.CilentSign {
  width: 100%;
  height: 898px;
  background: #ffffff;
  overflow: hidden;
  .head {
    padding: 15px 0 0 0;
    width: 1391px;
    height: 62px;
    line-height: 20px;
    font-size: 14px;
    .blue {
      width: 20px;
      height: 16px;
      line-height: 20px;
      background-color: rgba(82, 144, 255, 1);
      text-align: center;
      margin-left: 15px;
      border-left: 4px solid rgba(82, 144, 255, 1);
    }
    .pending {
      width: 54px;
      height: 27px;
      color: rgba(16, 16, 16, 1);
      font-size: 18px;
      font-weight: 700;
      text-align: left;
      margin-left: 13px;
      font-family: SourceHanSansSC-bold;
    }
  }
  .content {
    .name {
      margin-left: 33px;
    }
    .size {
      width: 117px;
      height: 40px;
      border-radius: 4px;
      background-color: rgba(32, 127, 253, 1);
      color: rgba(255, 255, 255, 1);
      font-size: 16px;
      text-align: center;
    }
    .yellow {
      width: 117px;
      height: 40px;
      border-radius: 4px;
      background-color: rgba(242, 229, 26, 1);
      color: rgba(255, 255, 255, 1);
      font-size: 16px;
      text-align: center;
      font-family: Roboto;
      border: 1px solid rgba(255, 255, 255, 0);
    }
  }
  .table {
    margin-left: 33px;
    text-align: center;
  }
}
</style>
